<template>
  <div class="addInfo">
    <el-dialog
      title="编辑游戏资讯"
      :close-on-click-modal="false"
      :visible.sync="isVisible"
      @close="closeDialog"
      center
    >
      <el-form
        :model="formdata"
        :rules="rules"
        ref="formdata"
        class="demo-ruleForm"
        label-width="120px"
      >
        <el-form-item label="资讯名称" prop="name">
          <el-input
            type="text"
            placeholder="请输入资讯名称"
            v-model="formdata.name"
            maxlength="24"
            show-word-limit
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="资讯类型" prop="type">
          <el-radio-group v-model="formdata.type">
            <el-radio :label="3">游戏攻略</el-radio>
            <el-radio :label="1">游戏资讯</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="关联游戏" prop="gameId">
          <el-select
            v-model="formdata.gameId"
            placeholder="输入游戏名搜索"
            filterable
            :disabled="flag"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.gameName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资讯内容" prop="content">
          <quill-editor
            v-model="formdata.content"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          ></quill-editor>
          <el-upload
            class="avatar-uploader"
            :action="action"
            :data="data"
            multiple
            :show-file-list="false"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="beforeUpload"
            accept=".png, .jpg, .jpeg"
          ></el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('formdata')"
          >确 定</el-button
        >
        <el-button @click="isVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// import Quill from "quill";
import { quillEditor, Quill } from "vue-quill-editor";
import { container, ImageExtend } from "quill-image-extend-module";
Quill.register("modules/ImageExtend", ImageExtend);

import { getOptionList } from "@/api/gameManage";
import { editInfo } from "@/api/infoManage";

export default {
  inject: ["reload"],
  data() {
    return {
      isVisible: this.isShow,
      formdata: {
        name: this.dialogRow.post_title,
        type: this.dialogRow.post_type,
        gameId: this.dialogRow.app_id,
        validTime: 1,
        time: [],
        content: this.dialogRow.post_content,
      },
      options: [],
      rules: {
        name: [{ required: true, message: "请输入资讯名称", trigger: "blur" }],
        type: [{ required: true, message: "请输入资讯类型", trigger: "blur" }],
        gameId: [
          { required: true, message: "请选择关联游戏", trigger: "blur" },
        ],
        validTime: [
          { required: true, message: "请选择有效期类型", trigger: "blur" },
        ],
        time: [{ required: true, message: "请选择有效期", trigger: "blur" }],
        content: [
          { required: true, message: "请输入资讯内容", trigger: "blur" },
        ],
      },
      // action: "/api/uploadFile",
      action: "https://cpop.zaoyx.com/api/v1/adminrebate/uploadFile",
      data: {
        fileType: "image",
      },
      editorOption: {
        modules: {
          ImageExtend: {
            loading: true,
            name: "file",
            action: "https://cpop.zaoyx.com/api/v1/adminrebate/uploadFile",
            response: (res) => {
              return res.data.previewUrl;
            },
          },
          toolbar: {
            // 工具栏
            container: container,
            handlers: {
              image: function (value) {
                if (value) {
                  document.querySelector(".avatar-uploader input").click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
        placeholder: "输入内容...",
      },
      flag: false,
    };
  },
  props: {
    isShow: Boolean,
    dialogRow: Object,
    cpId: Number,
  },
  components: {
    quillEditor,
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  mounted() {
    getOptionList().then((res) => {
      this.options = res.data.list;
    });
    if (this.cpId == 0) {
      this.flag = false;
    } else {
      this.flag = true;
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.cpId == 0) {
            var obj = {
              title: this.formdata.name,
              pid: this.dialogRow.id,
              type: this.formdata.type,
              content: this.formdata.content,
              gameId: this.formdata.gameId,
            };
          } else {
            var obj = {
              title: this.formdata.name,
              pid: this.dialogRow.id,
              type: this.formdata.type,
              content: this.formdata.content,
            };
          }

          const para = Object.assign({}, obj);
          editInfo(para)
            .then((res) => {
              this.$message({
                message: "创建成功！",
                type: "success",
              });
              setTimeout(() => {
                this.reload();
              }, 20);
            })
            .catch((error) => {});
          this.isVisible = false;
        }
      });
    },
    onEditorReady(editor) {
      // 准备编辑器
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {}, // 内容改变事件
    uploadSuccess(file, fileList) {
      let quill = this.$refs.myQuillEditor.quill;
      // 获取光标所在位置
      let length = quill.getSelection().index;
      // 插入图片  file.previewUrl为服务器返回的图片地址
      quill.insertEmbed(length, "image", file.data.previewUrl);
      // 调整光标到最后
      quill.setSelection(length + 1);

      // loading加载隐藏
      this.quillUpdateImg = false;
    }, //上传成功
    uploadError() {}, //上传失败
    beforeUpload(file) {
      if (file.type.indexOf("image") < 0) {
        this.$message.error("上传图片只能是JPG或PNG格式");
        return false;
      }
    }, //上传前
    closeDialog() {
      this.$emit("closeDialog");
    },
  },
};
</script>
<style lang="scss">
.addInfo {
  /* 编辑器内部出现滚动条 */
  .el-dialog {
    margin-top: 5vh !important;
  }
  .ql-container {
    overflow-y: auto;
    height: 300px;
  }
  .el-radio__label {
    font-size: 13px;
  }
  .el-dialog__wrapper .el-input.is-disabled .el-input__inner {
    color: #a5a4bf !important;
  }
  .el-input {
    width: 300px;
  }
  .el-select .el-input {
    width: 200px;
  }
  .el-form-item__label {
    padding: 0 20px 0 0;
  }
  .el-form-item__content {
    margin-bottom: 20px;

    .el-input__inner,
    .el-radio__inner {
      color: #a5a4bf;
      border: 1px solid #a5a4bf;
    }
    .el-input__inner::placeholder {
      color: #a5a4bf;
    }
  }
  .el-dialog__wrapper .el-input.is-disabled .el-input__inner {
    border: 1px solid #a5a4bf;
    background-color: #f5f7fa;
    cursor: not-allowed;
  }
}
</style>